<template>
    <div class="index">
        <h1>首页</h1>
        <div class="carousel">
            <banner></banner>
        </div>
        <navBottom></navBottom>
        <div class="con">
            <div class="con-item">
                <div class="con-item-name">
                    {{shoye[0].channel_info.name}}
                </div>
                <div class="list">
                    <div class="list-item" v-for="(ele,ind) in shoye[0].list" :key="ind">
                        <div class="l"><img :src="ele.teacher_avatar" alt=""></div>
                        <div class="r">
                            <p>{{ele.teacher_name}}</p>
                            <span>{{ele.introduction}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="con-item">
                <div class="con-item-name">
                    {{shoye[1].channel_info.name}}
                </div>
                <div class="list">
                    <div class="list-item1" v-for="(ele,ind) in shoye[1].list" :key="ind" @click="toDetail(ele.id)">
                        <div class="l">
                            <p>{{ele.title}}</p>
                            <span>共点击量</span>
                            <div class="my">{{ele.id}}人报名</div>
                        </div>
                        <div class="r">
                           <img src="@/assets/images/pay-other.png" alt="" class="money">
                           <span>0.00</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="con-item">
                <div class="con-item-name">
                    {{shoye[2].channel_info.name}}
                </div>
                <div class="list">
                    <div class="list-item" v-for="(ele,ind) in shoye[2].list" :key="ind">
                        <div class="l"><img :src="ele.teacher_avatar" alt=""></div>
                        <div class="r">
                            <p>{{ele.teacher_name}}</p>
                            <span>{{ele.introduction}}</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import banner from "@/components/banner"
import { getshoye } from "@/http/banner"
export default {
    data() {
        return {
            shoye: []
        }
    },
    created() {
        this.getshoye()
    },
    methods: {
        async getshoye() {
            let res = await getshoye()
            this.shoye = res.data
            console.log(this.shoye[1].list);
        },
        toDetail(id){
            this.$router.push({ path: '/detail', query: { id: id } })
        }
    },
    components: {
        banner
    }
}
</script>

<style lang="scss">
.carousel {
    overflow: hidden;
    width: 100%;
    height: 500px;
    position: relative;
}

.con {
    width: 100%;
    background-color: #eee;

    .con-item-name {
        font-size: 15px;
        border-left: 2px solid red;
        line-height: 40px;
        text-indent: 10px;
    }

    .list {
        width: 100%;

        .list-item {
            background-color: #fff;
            line-height: 30px;
            display: flex;
            margin-bottom: 10px;
            justify-content: center;
            align-items: center;

            .l {
                margin-top: 10px;
                margin-left: 30px;
                width: 50px;

                img {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                }
            }

            .r {
                flex: 1;
                display: flex;
                flex-direction: column;

                p {
                    font-size: 16px;
                }

                span {
                    color: #999;
                    font-size: 14px;
                }
            }
        }
    }
}
.list-item1{
        background-color: #fff;
        line-height: 30px;
        display: flex;
        margin-bottom: 10px;
        justify-content: space-between;
        align-items: center;
   .l{
     p{
        font-size: 16px;
     }
     span,
     .my{
        font-size: 12px;
        color: #999;
     }
   }
   .r{
     font-size: 12px;
     color: orange;
   }
}
.money{
    width: 20px;
    height: 20px;
}
</style>
